<template>
	<div class="tab-body">
		<el-row class="autoFlex" :gutter="10">
			<el-col :span="6">
				<el-card class="leftCard">
					<div slot="header" class="clearfix">
						<span>权限列表</span>
						<el-button @click="expandTree" class="expandBtn" type="primary" icon="el-icon-s-fold" size="small" style="margin-left: 20px;"></el-button>
					</div>
					<tree v-loading="treeLoading" ref="permissionTree" :items="permissionList" :defaultExpandAll="treeExpand"
					 :defaultParent="0" @nodeClick="treeClick"></tree>
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card class="rightCard">
					<div slot="header" class="clearfix"><span>子权限</span></div>
					<div class="operator">
						<el-button v-has-permission-code-and="'000000150005'" type="primary" icon="el-icon-plus" @click="toSave()">添加</el-button>
					</div>
					<div class="dataTable autoFlex">
						<qlh-table class="table" style="height: auto" :data="permissionTable" stripe border height="auto" :excelProp="excelProp">
							<qlh-table-column width="55" prop="icon" label="图标" ignored>
								<template slot-scope="scope">
									<i :class="scope.row.icon"></i>
								</template>
							</qlh-table-column>
							<qlh-table-column prop="type" label="菜单类型" min-width="100" :editable="false" :formatter="
										(row, column) => {
											return row.type == 1 ? '展示菜单' : row.type == 2 ? '功能菜单' : '功能按钮';
										}
									"></qlh-table-column>
							<qlh-table-column prop="code" label="权限标识" width="110" sortable></qlh-table-column>
							<qlh-table-column prop="name" label="权限名" min-width="100" :editable="false" sortable></qlh-table-column>
							<qlh-table-column prop="component" label="组件"></qlh-table-column>
							<qlh-table-column prop="url" label="url"></qlh-table-column>
							<qlh-table-column prop="opentype" label="打开方式" width="100" :formatter="
										(row, column) => {
											return row.opentype == 1 ? '内部' : row.opentype == 2 ? '外部' : '';
										}
									"></qlh-table-column>
							<qlh-table-column label="操作" fixed="right" width="300" ignored :editable="false">
								<template slot-scope="scope">
									<div class="dataTable-operator">
										<el-button v-has-permission-code-and="'000000150020'" size="mini" icon="el-icon-search" @click="toDetail(scope.$index, scope.row)">详情
										</el-button>
										<el-button v-has-permission-code-and="'000000150010'" size="mini" icon="el-icon-edit" @click="toUpdate(scope.$index, scope.row)">编辑
										</el-button>
										<el-button v-has-permission-code-and="'000000150015'" size="mini" type="danger" icon="el-icon-delete" @click="remove(scope.$index, scope.row)">删除
										</el-button>
									</div>
								</template>
							</qlh-table-column>
						</qlh-table>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<edit ref="edit"></edit>
	</div>
</template>
<script>
	import edit from './edit.vue';
	import tree from '@/components/tree/tree.vue';
	import api from '@/api/system/permission/permission.js';
	import qlhTable from '@/components/qlhTable/qlhTable.vue';
	import qlhTableColumn from '@/components/qlhTable/qlhTableColumn.vue';
	export default {
		name: 'permission',
		components: {
			tree,
			edit,
			qlhTable,
			qlhTableColumn
		},
		data() {
			return {
				treeLoading: false,
				treeRef: 'permissionTree',
				treeExpand: true,
				permissionList: [],
				currentNode: {},
				permissionTable: [],
				tableLoading: true,
				editParameter: {},
				excelProp: {
					excelName: '权限信息',
					sheetname: '权限信息'
				}
			};
		},
		methods: {
			//获取数据
			list() {
				this.treeLoading = true;
				api.list({}, response => {
					this.permissionList = response.data;
					this.treeLoading = false;
					this.freshTable();
				})
			},
			expandTree() {
				this.treeExpand = !this.treeExpand;
				//控制el-tree展开收起
				for (var i = 0; i < this.$refs.permissionTree.getTree().store._getAllNodes().length; i++) {
					this.$refs.permissionTree.getTree().store._getAllNodes()[i].expanded = this.treeExpand;
				}
			},
			//点击部门
			treeClick(data) {
				if (this.currentNode == data) {
					this.currentNode = {};
					$('.el-tree-node').removeClass('is-current');
				} else {
					this.currentNode = data;
				}
				this.freshTable();
			},
			freshTable() {
				this.tableLoading = true;
				this.permissionTable = [];
				if (this.currentNode.id) {
					for (var d of this.permissionList) {
						if (d.pid == this.currentNode.id) {
							this.permissionTable.push(d);
						}
					}
				} else {
					for (var d of this.permissionList) {
						//根节点
						if (d.pid == 0) {
							this.permissionTable.push(d);
						}
					}
				}
				this.tableLoading = false;
			},
			//去添加
			toSave() {
				let parameter = {
					pid: this.currentNode.id != undefined ? this.currentNode.id : 0,
					level: this.currentNode.level != undefined ? this.currentNode.level + 1 : 0,
					code: this.currentNode.code
				};

				this.$refs.edit.open(parameter, '添加');
			},
			//去编辑
			toUpdate(index, row) {
				let parameter = {
					id: row.id
				};
				this.$refs.edit.open(parameter, '编辑');
			},
			//去详情
			toDetail(index, row) {
				let detailParameter = {
					id: row.id
				};
				this.$refs.edit.open(detailParameter, '详情', true);
			},
			//删除
			remove(index, row) {
				let parameter = {
					ids: row.id
				}
				this.$utils.confirm.warning('提示', '确定删除吗？', () => {
					api.remove(
						parameter,
						response => {
							this.$utils.msg.success(response.msg);
							this.list();
						},
						response => {
							this.$utils.msg.warning(response.msg);
						}
					);
				});
			},
		},

		mounted() {
			this.list();
		}
	};
</script>

<style lang="scss" scoped="scoped">
	@import '~common/custom/css/common.scss';
</style>
